<!--
 * 普通用户公告通知列表
 *
 * @Author: 
 * @Date: 
-->
<template>
    <div v-if="isCommonUser">
        <el-card class="notice-card">
            <div slot="header" class="clearfix">
                <span><i class="iconfont icon-notice-menu"></i> 最新公告</span>
            </div>
            <div class="notice-list">
                <el-table :data="notices" style="width: 100%">
                    <el-table-column prop="title" label="标题" width="200">
                    </el-table-column>
                    <el-table-column prop="content" label="内容">
                        <template slot-scope="scope">
                            <span v-html="scope.row.content"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operator" label="操作人" width="120">
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="180">
                        <template slot-scope="scope">
                            {{ dateFormat(scope.row.createTime, 3) }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <el-dialog
            title="公告详情"
            :visible.sync="dialogVisible"
            width="50%"
            center
        >
            <el-card>
                <div slot="header" class="notice-detail-header">
                    <h2>{{ currentNotice.title }}</h2>
                </div>
                <div class="notice-detail-content">
                    <div v-html="currentNotice.content"></div>
                </div>
                <div class="notice-detail-footer">
                    <p>创建人：{{ currentNotice.operator }}</p>
                    <p>创建时间：{{ dateFormat(currentNotice.createTime, 3) }}</p>
                </div>
            </el-card>
            
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import axios from "axios";
export default {
    data() {
        return {
            notices: [],
            dialogVisible: false,
            currentNotice: {},
            isCommonUser: true // 默认认为是普通用户
        };
    },
    methods: {
        getList() {
            // 只有普通用户才获取公告列表
            if (!this.isCommonUser) {
                return;
            }
            
            axios.get("/api/notice/getLastThree").then((res) => {
                this.notices = res.data.data;
            });
        },
        showNoticeDetail(notice) {
            // 只有普通用户才能查看详情
            if (!this.isCommonUser) {
                return;
            }
            
            this.currentNotice = notice;
            this.dialogVisible = true;
        },
        //时间转换函数
        dateFormat(val, timeType) {
            //将字符串或长整型转为时间类型
            let date = new Date(val);
            //默认格式为'年月日 时:分:秒'
            let resultFormat = "Y年M月D日 h:m:s";
            switch (timeType) {
                case 1:
                    resultFormat = "Y年M月D日";
                    break;
                case 2:
                    resultFormat = "Y-M-D";
                    break;
                case 3:
                    resultFormat = "Y-M-D h:m:s";
                    break;
            }
            let result = formatTime(resultFormat);

            // 格式化日期，如月、日、时、分、秒保证为2位数
            function formatNumber(n) {
                n = n.toString();
                return n[1] ? n : "0" + n;
            }
            // 参数number为毫秒时间戳，format为需要转换成的日期格式
            function formatTime(format) {
                let newArr = [];
                let formatArr = ["Y", "M", "D", "h", "m", "s"];
                newArr.push(date.getFullYear());
                newArr.push(formatNumber(date.getMonth() + 1));
                newArr.push(formatNumber(date.getDate()));

                newArr.push(formatNumber(date.getHours()));
                newArr.push(formatNumber(date.getMinutes()));
                newArr.push(formatNumber(date.getSeconds()));

                for (let i in newArr) {
                    format = format.replace(formatArr[i], newArr[i]);
                }
                return format;
            }

            return result;
        },
        // 获取最新公告
        getLastNotice() {
            // 只有普通用户才弹出公告
            if (!this.isCommonUser) {
                return;
            }
            
            axios.get("/api/notice/getLast").then((res) => {
                if (res.data.data) {
                    const notice = res.data.data;
                    this.$alert(
                        `<div>
                            <p><strong>公告内容：</strong></p>
                            <p>${notice.content}</p>
                            <br/>
                            <p><strong>创建人：</strong>${notice.operator}</p>
                            <p><strong>创建时间：</strong>${this.dateFormat(notice.createTime, 3)}</p>
                        </div>`, 
                        notice.title, 
                        {
                            dangerouslyUseHTMLString: true,
                            confirmButtonText: '确定',
                            type: 'info',
                            customClass: 'notice-alert-dialog'
                        }
                    );
                }
            });
        },
        // 检查是否为普通用户
        checkUserType() {
            try {
                const userInfoStr = window.sessionStorage.getItem("userInfo");
                if (userInfoStr) {
                    const userInfo = JSON.parse(userInfoStr);
                    // 管理员用户名为admin时不显示公告
                    this.isCommonUser = userInfo.username !== 'admin';
                }
            } catch (e) {
                console.error("解析用户信息失败", e);
                // 出错时默认认为是普通用户
                this.isCommonUser = true;
            }
        }
    },
    mounted() {
        this.checkUserType();
        if (this.isCommonUser) {
            this.getList();
            // 获取最新公告并在登录后弹出
            this.getLastNotice();
        }
    },
};
</script>

<style scoped>
.notice-card {
    margin-bottom: 20px;
}

.notice-detail-header {
    text-align: center;
    margin-bottom: 20px;
}

.notice-detail-content {
    min-height: 100px;
    margin-bottom: 20px;
}

.notice-detail-footer {
    text-align: right;
    color: #999;
    font-size: 14px;
}
</style>
<style>
.notice-alert-dialog {
    width: 500px;
}
</style>